<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <main id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{sex}}</p>
        <p>是否成年：{{age >= 18 ? "成年" : "未成年"}}</p>
        <p>{{say()}}</p>
    </main>
    <p>vue的数据是动态绑定的：vue的数据变化，页面上展示的数据跟着变化</p>
    <button onclick="handleClick()">点击我</button>
    <h2>vue模板语法</h2>
    <ul>
        <li>{{}}表示vue的模板语法</li>
        <li>使用属性：{{属性名}}</li>
        <li>使用方法：{{方法名()}}</li>
        <li>{{}}中支持简单的js表达式</li>
    </ul>
</body>
<script src="../vue.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            name: "Hydra",
            age: 35,
            message: "Hello"
        },
        // mehtods，是个对象，内部全部定义方法属性
        methods: {
            say() {
                // this指的是当前vue对象
                // 访问vue对象中的data中的数据，不用使用vue.data.XXX，直接使用vue.XXX即可
                return this.name + "说：“" + this.message + "”";
            }
        }
    });

    function handleClick() {
        vue.name = "奉先";
        vue.message = "再见";
    }
</script>
</html>